<template>
	<view class="page flex flex-col">
		<navbar :leftText="'邀请'" :leftIcon="true" :backStatus="true"></navbar>
		<view class="flex-1  flex-column-center heightFull">
			<view>
				<l-painter ref="painterYao">
					<template v-if="show">
						<l-painter-view css="position:relative;">
							<l-painter-image src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yaoqing@2x.png"
								css="width: 526rpx; height: 682rpx;object-fit: fill;object-position: 50% 50%;margin:0 auto;" />
							<l-painter-image :src="imgUrlCode"
								css="width: 220rpx; height: 220rpx;position:absolute;top:365rpx;left:160rpx;" />
						</l-painter-view>
					</template>
				</l-painter>
			</view>


			<view class="flex-center">
				<view class="yaoSaveBtn flex-center text-white text-28" @click="savePic">一键保存图片并分享</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"

	import {
		ref,
		onMounted
	} from "vue"

	let invCode = ref();

	onMounted(() => {
		if (uni.getStorageSync("invCode")) {
			invCode.value = uni.getStorageSync("invCode");
			// 获取设备列表
			getYaoCode()
		}

	})

	const imgUrlCode = ref("");

	const getYaoCode = () => {
		uni.showLoading({
			title: "加载中"
		})
		let e = {
			url: '/app-api/member/social-user/wxa-qrcode',
			data: {
				scene: invCode.value,
				path: "pages/index/index",
				width: 430,
				autoColor: true,
				checkPath: true,
				hyaline: true
			}
		};
		api.default.post(e).then((res) => {
			let base64Str = res.data;
			console.log("getBase64ImageUrl(base64Str);", getBase64ImageUrl(base64Str));

			// imgUrlCode.value = URL.createObjectURL(blob);
			imgUrlCode.value = getBase64ImageUrl(base64Str);

			// 在页面上显示图片
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
		})
	}

	const getBase64ImageUrl = (base64Url) => {
		/// 获取到base64Data
		var base64Data = base64Url;
		/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
		base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
		/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
		const base64ImgUrl = "data:image/png;base64," + base64Data;
		/// 得到的base64ImgUrl直接给图片:src使用即可
		return base64ImgUrl;
	}

	const show = ref(true);

	const painterYao = ref();

	const saveImg = ref();

	const savePic = () => {
		painterYao.value.canvasToTempFilePathSync({
			fileType: "jpg",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			quality: 1,
			success: (res) => {
				console.log(res);
				saveImg.value = res.tempFilePath;
				// 非H5 保存到相册
				// H5 提示用户长按图另存
				// uni.saveImageToPhotosAlbum({
				// 	filePath: res.tempFilePath,
				// 	success: function() {
				// 		console.log('save success');
				// 	}
				// });

				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function() {
						console.log('save success');
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
					},
					fail: function() {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			},
		});
	}
</script>

<style scoped>
	.pageDevice {
		height: 100%;
	}

	.yaoSaveBtn {
		width: 354rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 44rpx;
		margin-top: 60rpx;
	}

	.yaoBg {
		width: 526rpx;
		height: 682rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yaoqing%402x.png") no-repeat;
		background-size: 100% 100%;
	}
</style>